import Taro, { Component } from '@tarojs/taro'
import { Textarea, View } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'

interface IProps {
  isOpened: boolean //  显示隐藏
  onClose: Function //  取消事件
  onConfirm: Function //  确定选择优惠券
}

export default class RefundModal extends Component<IProps, {}> {
  props: any
  static options = {
    addGlobalClass: true
  }

  constructor() {
    super(...arguments)
    this.state = {
      input: '',
    }
  }

  //  输入文本框事件
  onInput(e) {
    this.setState({
      input: e.detail.value
    })
  }

  render() {
    const { isOpened, onClose, onConfirm } = this.props
    const { input }:any = this.state
    // @ts-ignore
    return (<View className={classNames('refund-modal fy-transition fade fy-modal', isOpened && 'show')} catchtouchmove>
      <View className={classNames('fy-transition fade fy-mask', isOpened && 'show')} onClick={() => onClose()}/>
      <View className={classNames('fy-transition fade fy-container', isOpened && 'show')}>
        {isOpened && <View className='modal-box'>
          <View className='modal-head f-g-5'>
            <View className='head-title'>退单原因</View>
          </View>
          <View className='modal-body'>
            <Textarea
              placeholder="请输入您的退单原因、方便我们改善哦~"
              className='modal-textarea'
              placeholder-class='placeholder'
              onInput={this.onInput.bind(this)}
            />
          </View>
          <View className='modal-foot d-f a-i-c j-c-b'>
            <View className='modal-btn cancel-btn f-g-5 thin-border' hoverClass='hover-class--btn' onClick={() => onClose()}>我再想想</View>
            <View className='modal-btn confirm-btn f-g-5' hoverClass='hover-class--btn' onClick={() => onConfirm(input)}>提交</View>
          </View>
        </View>}
      </View>
    </View>)
  }
}
